<!DOCTYPE html>
<style>
    .part { height:30px; background:blue; }
</style>
<p>There should be a blue square below.</p>
<div style="columns:3; column-fill:auto; column-gap:0; width:30px; height:80px; line-height:20px;">
    <div style="position:relative;">
        <div style="float:left; width:100%;">
            <div id="elm1" class="part"></div>
            <div id="elm2" class="part" style="break-before:column; break-after:column;"></div>
            <div id="elm3" class="part"></div>
        </div>
    </div>
</div>

<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
test(() => {
    assert_equals(document.getElementById("elm1").offsetTop, 0);
    assert_equals(document.getElementById("elm2").offsetTop, 80);
    assert_equals(document.getElementById("elm3").offsetTop, 160);
}, "Forced breaks should be allowed inside floats");
</script>
